'use strict';

import React from 'react';
import {
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
    InteractionManager,
    NativeModules,
    ListView,
    TouchableHighlight,
    Modal,
    RefreshControl,
    Alert,
    TouchableOpacity,
} from 'react-native';
import {connect} from 'react-redux';
import styles from './styles';
import {getShopInfo, showQrImg, hideQrImg, changeRefresh, showModels, getToken,gotoAddProduct} from './actions';
import NaviUtil from '../../utils/NaviUtil';
import Communications from 'react-native-communications';
import {authShops} from '../shop/actions';

import ShopState from './shopState';

import {naviPush} from '../../navigatorApp/actions'

class TabMain extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.getShops();
        });
    }


    getShops = () => {
        let self = this;
        authShops(function (token, user) {
            self.props.getToken(token, user);
            self.props.getShopInfo();
        });
    };

    refreshData = () => {
        const self = this;
        return function () {
            self.getShops();
        }
    };

    isCanUse = () => {
        if (this.props.shopState == 2) {
            return true;
        } else if (this.props.shopState == 3) {
            Alert.alert('提示',
                "您的店铺正在审核中",
                [
                    {
                        text: '了解', onPress: () => {
                    }
                    },
                ]);
        } else {
            let tsMessage = "";
            let buttonTitle = "";
            if (this.props.shopState == 0) {
                tsMessage = "请先创建店铺";
                buttonTitle = "立即创建";
            } else if (this.props.shopState == 1) {
                tsMessage = "请先完善店铺";
                buttonTitle = "立即完善";
            }
            Alert.alert('提示',
                tsMessage,
                [
                    {
                        text: '以后再说', onPress: () => {
                    }
                    },
                    {
                        text: buttonTitle, onPress: () => {
                        this.props.naviPush("shopComplete")
                    }
                    }
                ]);
            return false;
        }
    }

    moduleOnClick = (item, passProps, navigator) => {
        if (this.isCanUse()) {
            this.props.gotoAddProduct(false);
            this.props.naviPush(item.tag)
        }
    };

    render() {
        const models = this.props.models;
        const shopId = this.props.shopInfo.shopid;
        const navigator = this.props.navi;
        const ModalDiv = models.map((item, i) => {

            const passProps = {
                shopid: shopId,
            };

            return <TouchableHighlight
                key={i}
                underlayColor='#eee'
                onPress={() => this.moduleOnClick(item, passProps, navigator)}>
                <View style={styles.moduleItemContainer}>
                    <Image resizeMode="contain" source={item.uri} style={styles.moduleItemImage}/>
                    <Text style={styles.moduleItemTitle}>{item.name}</Text>
                </View>
            </TouchableHighlight>
        })

        const transactionMonthValue = parseInt(this.props.shopData.transactionMonth) / 100;
        const transactionAllValue = parseInt(this.props.shopData.transactionAll) / 100;

        return <ScrollView
            style={{backgroundColor: "white"}}
            refreshControl={
                <RefreshControl
                    refreshing={this.props.refreshLoading}
                    onRefresh={this.refreshData()}
                />
            }>
            <ShopState/>

            <View style={{backgroundColor: "#eee", paddingBottom: 1}}>
                <View style={styles.liushuiContainer}>
                    <View style={styles.rowContainer}>
                        <View style={[styles.colContainer, {marginRight: 5}]}>
                            <Text style={styles.textValue}>{transactionMonthValue}</Text>
                            <Text style={styles.textTitle}>本月流水</Text>
                        </View>
                        <View style={[styles.colContainer, {marginLeft: 5}]}>
                            <Text style={styles.textValue}>{transactionAllValue}</Text>
                            <Text style={styles.textTitle}>所有流水</Text>
                        </View>
                    </View>
                </View>
                <TouchableOpacity
                    onPress={() => {
                        if (this.isCanUse()) {
                            this.props.gotoAddProduct(true);
                            this.props.naviPush("ProductAdd")
                        }
                    }}>
                    <View style={styles.productAddContainer}>
                        <View style={{flex: 1, alignItems: 'center', flexDirection: 'row'}}>
                            <Image source={require('../../image/add.png')}
                                   style={{marginRight: 10, width: 25, height: 25}}/>
                            <Text>新增商品</Text>
                        </View>
                        <View style={{flex: 1, alignItems: 'flex-end',}}>
                            <Image source={require('../../image/img_right_grey.png')} style={{width: 15, height: 10}}/>
                        </View>
                    </View>
                </TouchableOpacity>
            </View>
            <View style={styles.moduleContainer}>
                <View style={styles.modulerowContainer}>
                    {ModalDiv}
                </View>
            </View>
        </ScrollView>
    }
}

const mapStateToProps = (state) => {
    return {
        shopState: state.mainmodel.shopState,
        models: state.mainmodel.models,
        shopInfo: state.mainmodel.shopInfo,
        shopData: state.mainmodel.shopData,
        isloading: state.mainmodel.isloading,
        shopImgModalVisible: state.mainmodel.shopImgModalVisible,
        refreshLoading: state.mainmodel.refreshLoading,
        userToken: state.mainmodel.userToken
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        naviPush: (routerName) => {
            dispatch(naviPush(routerName))
        },
        getShopInfo: () => {
            dispatch(getShopInfo())
        },
        hideQrImg: () => {
            dispatch(hideQrImg())
        },
        showModels: () => {
            dispatch(showModels())
        },
        getToken: (token, usertoken) => {
            dispatch(getToken(token, usertoken))
        },
        gotoAddProduct: (value) => {
            dispatch(gotoAddProduct(value));
        }
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(TabMain);